import React, { Component } from "react";
import { Text, View, StyleSheet, TouchableOpacity, Platform, DeviceEventEmitter, Switch, FlatList, ScrollView } from 'react-native';
import Constant from '../../../utils/Constant'//全局变量
import Header from "../../../components/header";
const isAndroid = Platform.OS == 'android';
import RangeSlider from 'rn-range-slider';
import PriceRangeModal from "./PriceRangeModal";



let navigation = null

export default class MoreFilterPage extends Component {
    constructor(props) {
        super(props);

        this.rangeSliderPrice = React.createRef();

        this.state = {
            isHasWeibao: false,
            mileShowText: '不限',
            mileageMin: 0,
            mileageMax: 10,
            ageShowText: '不限',
            registerDateBegin: 0,
            registerDateEnd: 8,
            // 价格筛选组件
            isPriceVisible: false,
            priceText: '不限',
            listPriceMin: 0,
            listPriceMax: 60,
            outColors: [
                { colorTitle: '不限', colorId: false, color: '', selected: true }, { colorTitle: '银灰色', colorId: 1, color: '#c1c1c1', selected: false }
                , { colorTitle: '深灰色', colorId: 2, color: '#888888', selected: false }, { colorTitle: '黑色', colorId: 3, color: '#222222', selected: false }
                , { colorTitle: '白色', colorId: 4, color: '#ffffff', selected: false }, { colorTitle: '红色', colorId: 5, color: '#c83138', selected: false }
                , { colorTitle: '蓝色', colorId: 6, color: '#466cb3', selected: false }, { colorTitle: '咖啡色', colorId: 7, color: '#70462B', selected: false }
                , { colorTitle: '香槟色', colorId: 8, color: '#E0D0AF', selected: false }, { colorTitle: '黄色', colorId: 9, color: '#F5D94D', selected: false }
                , { colorTitle: '紫色', colorId: 10, color: '#783B6F', selected: false }, { colorTitle: '绿色', colorId: 11, color: '#9EC573', selected: false }
                , { colorTitle: '橙色', colorId: 12, color: '#e87b3b', selected: false }, { colorTitle: '棕色', colorId: 14, color: '#744124', selected: false },
                { colorTitle: '其他', colorId: 17, color: '', selected: false }],
            colorSelectIndex: 0,
            carColorListData: [],

            carRankList: [{ title: '不限', id: '', selected: true }, { title: '微型', id: 'a00', selected: false }, { title: '小型车', id: 'a0', selected: false },
                { title: '紧凑型', id: 'a', selected: false }, { title: '中型车', id: 'b', selected: false }, { title: '大型车', id: 'd', selected: false },
                { title: 'SUV', id: 'suv', selected: false }, { title: 'MPV', id: 'mpv', selected: false }, { title: '跑车', id: 's', selected: false },
                { title: '皮卡', id: 'pk', selected: false }],
            rankSelectIndex: 0,
            carRankListData: [],

            gearBoxList: [{ title: '不限', id: 0, selected: true }, { title: '手动', id: 1, selected: false }, { title: '自动', id: 2, selected: false },
                { title: '手自一体', id: 3, selected: false }, { title: '双离合', id: 4, selected: false }
                , { title: '无级变速', id: 5, selected: false }, { title: 'AMT机械变速', id: 6, selected: false }, { title: '其它', id: 9, selected: false }],
            gearSelectIndex: 0,
            gearBoxListData: [],

            emissionStdList: [{ title: '不限', id: 0, selected: true }, { title: '国Ⅰ', id: 1, selected: false }, { title: '国Ⅱ', id: 2, selected: false },
                { title: '国Ⅲ', id: 3, selected: false }, { title: '国Ⅳ', id: 4, selected: false }, { title: '国Ⅴ', id: 5, selected: false },
                { title: '国Ⅵ', id: 6, selected: false }],
            emissionStdSelectIndex: 0,
            emissionStdListData: [],

            energyTypeList: [{ title: '不限', id: 0, selected: true }, { title: '汽油', id: 1, selected:  false }, { title: '柴油', id: 2, selected:  false },
                { title: '油电混合', id: 3, selected:  false }, { title: '纯电动', id: 4, selected:  false }, { title: '氢燃料电池', id: 5, selected:  false },
                { title: '插电式混动', id: 6, selected:  false }, { title: '增程式', id: 7, selected:  false }, { title: '汽油+48V轻混', id: 8 }],
            energyTypeSelectIndex: 0,
            energyTypeListData: [],

        };
    }

    componentDidMount() {
        navigation = this.props.navigation;
        this.initData()
    }

    initData() {
        if (this.props.route && this.props.route.params) {
            let params = this.props.route.params;
            console.log('params =====', params)

            if(params.fromPage == 'OfferPriceCenterPage'){
                this.setState({
                    isPriceVisible: true
                })
            }

            this.setState(
                {
                    isHasWeibao: params.isReported == 1 ? true : false,
                    mileageMin: params.mileageMin,
                    mileageMax: params.mileageMax
                }
            )

            if (this.refs._rangeSlider) {
                this.refs._rangeSlider.setLowValue(params.mileageMin);
                this.refs._rangeSlider.setHighValue(params.mileageMax);
            }

            if (this.refs._rangeSliderAge) {
                this.refs._rangeSliderAge.setLowValue(params.registerDateBegin);
                this.refs._rangeSliderAge.setHighValue(params.registerDateEnd);
            }

            if (this.rangeSliderPrice.current) {
                const lowValue = params.listPriceMin !== undefined ? params.listPriceMin : 0;
                const highValue = params.listPriceMax !== undefined ? params.listPriceMax : 60;
                this.rangeSliderPrice.current.setLowValue(lowValue);
                this.rangeSliderPrice.current.setHighValue(highValue);
            }

            // 选中颜色
            if(params.carColorList && params.carColorList.length > 0){
                this.setState({
                    carColorListData: params.carColorList
                })
                params.carColorList.forEach((item, index) => {
                    this.state.outColors.map((color, index) => {
                        if(color.colorTitle == '不限'){
                            color.selected = false;
                        }
                        if (color.colorTitle == item) {
                            color.selected = true;
                        }
                    })
                })
            }

            // 级别
            if(params.carRankList && params.carRankList.length > 0){
                this.setState({
                    carRankListData: params.carRankList
                })
                params.carRankList.forEach((item, index) => {
                    this.state.carRankList.map((rank, index) => {
                        if(rank.title == '不限'){
                            rank.selected = false;
                        }
                        if (rank.id == item) {
                            rank.selected = true;
                        }
                    })
                })
            }

            // 变速箱
            if(params.gearboxTypeList && params.gearboxTypeList.length > 0){
                this.setState({
                    gearboxTypeListData: params.gearboxTypeList
                })
                params.gearboxTypeList.forEach((item, index) => {
                    this.state.gearBoxList.map((gearBox, index) => {
                        if(gearBox.title == '不限'){
                            gearBox.selected = false;
                        }
                        if (gearBox.id == item) {
                            gearBox.selected = true;
                        }
                    })
                })
            }

            // 排放标准
            if(params.emissionStdList && params.emissionStdList.length > 0){
                this.setState({
                    emissionStdListData: params.emissionStdList
                })
                params.emissionStdList.forEach((item, index) => {
                    this.state.emissionStdList.map((emission, index) => {
                        if(emission.title == '不限'){
                            emission.selected = false;
                        }
                        if (emission.id == item) {
                            emission.selected = true;
                        }
                    })
                })
            }

            // 能源类型
            if(params.energyTypeList && params.energyTypeList.length > 0){
                this.setState({
                    energyTypeListData: params.energyTypeList
                })
                params.energyTypeList.forEach((item, index) => {
                    this.state.energyTypeList.map((energy, index) => {
                        if(energy.title == '不限'){
                            energy.selected = false;
                        }
                        if (energy.id == item) {
                            energy.selected = true;
                        }
                    })
                })
            }


            if (params.carRank != '') {
                for (var i = 0; i < this.state.carRankList.length; i++) {
                    if (this.state.carRankList[i].id == params.carRank) {
                        this.setState({ rankSelectIndex: i });
                        break;
                    }
                }
            }

            if (params.gearboxType != 0) {
                for (var i = 0; i < this.state.gearBoxList.length; i++) {
                    if (this.state.gearBoxList[i].id == params.gearboxType) {
                        this.setState({ gearSelectIndex: i });
                        break;
                    }
                }
            }

            if (params.emissionStd != 0) {
                for (var i = 0; i < this.state.emissionStdList.length; i++) {
                    if (this.state.emissionStdList[i].id == params.emissionStd) {
                        this.setState({ emissionStdSelectIndex: i });
                        break;
                    }
                }
            }

            if (params.energyType != 0) {
                for (var i = 0; i < this.state.energyTypeList.length; i++) {
                    if (this.state.energyTypeList[i].id == params.energyType) {
                        this.setState({ energyTypeSelectIndex: i });
                        break;
                    }
                }
            }


        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={'更多'} ></Header>

                <ScrollView style={{ flex: 1 }}>
                    <View style={styles.itemContain}>
                        <Text style={styles.titleText}>有维保报告</Text>

                        <Switch
                            value={this.state.isHasWeibao}
                            onValueChange={(change) => {
                                this.setState({ isHasWeibao: change });
                            }}
                            trackColor={{ true: "#ffde00", false: "#eeeeee" }}
                            thumbColor={this.state.isHasWeibao ? "#f2d500" : "#f4f3f4"}
                        >

                        </Switch>
                    </View>

                    <View style={styles.mileContain}>
                        <View style={styles.mileTitleContain}>
                            <Text style={styles.titleText}>里程（万公里）</Text>
                            <Text style={styles.mileValueText}>{this.state.mileShowText}</Text>
                        </View>

                        <RangeSlider
                            ref="_rangeSlider"
                            style={{ width: '100%', height: 60 }}
                            gravity={'center'}
                            min={0}
                            max={10}
                            step={1}
                            selectionColor="#ffdb1b"
                            blankColor="#e4e4e4"
                            labelStyle={'none'}
                            onValueChanged={(low, high, fromUser) => {
                                this.changeMile(low, high)
                            }}
                            thumbBorderWidth={4}
                            thumbBorderColor={'#fff'}
                            thumbColor={'#ffdb1b'}
                        />
                        <View style={styles.rangeTipContain}>
                            <Text>0</Text>
                            <Text>5</Text>
                            <Text>不限</Text>
                        </View>

                    </View>

                    <View style={styles.mileContain}>
                        <View style={styles.mileTitleContain}>
                            <Text style={styles.titleText}>车龄（年）</Text>
                            <Text style={styles.mileValueText}>{this.state.ageShowText}</Text>
                        </View>

                        <RangeSlider
                            ref="_rangeSliderAge"
                            style={{ width: '100%', height: 60 }}
                            gravity={'center'}
                            min={0}
                            max={8}
                            step={1}
                            selectionColor="#ffdb1b"
                            blankColor="#e4e4e4"
                            labelStyle={'none'}
                            onValueChanged={(low, high, fromUser) => {
                                this.changeAge(low, high)
                            }}
                            thumbBorderWidth={4}
                            thumbBorderColor={'#fff'}
                            thumbColor={'#ffdb1b'}
                        />
                        <View style={styles.rangeTipContain}>
                            <Text>0</Text>
                            <Text>4</Text>
                            <Text>不限</Text>
                        </View>

                    </View>


                    {/* 价格筛选组件 */}
                    {this.state.isPriceVisible ?
                        <View style={styles.mileContain}>
                            <View style={styles.mileTitleContain}>
                                <Text style={styles.titleText}>价格（万元）</Text>
                                <Text style={styles.mileValueText}>{this.state.priceText}</Text>
                            </View>

                            <RangeSlider
                                ref={this.rangeSliderPrice}
                                style={{ width: '100%', height: 60 }}
                                gravity={'center'}
                                min={0}
                                max={60}
                                step={1}
                                selectionColor="#ffdb1b"
                                blankColor="#e4e4e4"
                                labelStyle={'none'}
                                onValueChanged={(low, high, fromUser) => {
                                    this.changePrice(low, high)
                                }}
                                thumbBorderWidth={4}
                                thumbBorderColor={'#fff'}
                                thumbColor={'#ffdb1b'}
                            />

                            <View style={styles.rangeTipContain}>
                                <Text>0</Text>
                                <Text>10</Text>
                                <Text>20</Text>
                                <Text>30</Text>
                                <Text>40</Text>
                                <Text>50</Text>
                                <Text>不限</Text>
                            </View>

                        </View> : null}


                    <View style={[styles.mileContain, { paddingBottom: 10 }]}>
                        <View style={styles.mileTitleContain}>
                            <Text style={styles.titleText}>外观颜色</Text>
                        </View>
                        <FlatList
                            data={this.state.outColors}
                            renderItem={({ item, index }) => this.renderColorItem(item, index)}
                            keyExtractor={(item, index) => index}
                            extraData={this.state}
                            numColumns={4} />
                    </View>


                    <View style={[styles.mileContain, { paddingBottom: 10 }]}>
                        <View style={styles.mileTitleContain}>
                            <Text style={styles.titleText}>车型级别</Text>
                        </View>
                        <FlatList
                            data={this.state.carRankList}
                            renderItem={({ item, index }) => this.renderRankItem(item, index)}
                            keyExtractor={(item, index) => index}
                            extraData={this.state}
                            numColumns={4}
                        />
                    </View>

                    <View style={[styles.mileContain, { paddingBottom: 10 }]}>
                        <View style={styles.mileTitleContain}>
                            <Text style={styles.titleText}>变速箱</Text>
                        </View>
                        <FlatList
                            data={this.state.gearBoxList}
                            renderItem={({ item, index }) => this.renderGearBoxItem(item, index)}
                            keyExtractor={(item, index) => index}
                            extraData={this.state}
                            numColumns={4}
                        />
                    </View>

                    <View style={[styles.mileContain, { paddingBottom: 10 }]}>
                        <View style={styles.mileTitleContain}>
                            <Text style={styles.titleText}>排放标准</Text>
                        </View>
                        <FlatList
                            data={this.state.emissionStdList}
                            renderItem={({ item, index }) => this.renderEmissionStdItem(item, index)}
                            keyExtractor={(item, index) => index}
                            extraData={this.state}
                            numColumns={4}
                        />

                    </View>

                    <View style={[styles.mileContain, { paddingBottom: 10 }]}>
                        <View style={styles.mileTitleContain}>
                            <Text style={styles.titleText}>燃油类型</Text>
                        </View>
                        <FlatList
                            data={this.state.energyTypeList}
                            renderItem={({ item, index }) => this.renderenergyTypeItem(item, index)}
                            keyExtractor={(item, index) => index}
                            extraData={this.state}
                            numColumns={4}
                        />
                    </View>

                </ScrollView>
                <View style={[styles.bottomTabContainer, { height: 50 + Constant.bottomHeight }]}>
                    <TouchableOpacity
                        style={styles.resetBtn}
                        onPress={() => { this.resetFilter() }}>
                        <Text style={styles.btnText}>重置</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.confirmBtn}
                        onPress={() => { this.confirmFilter() }}>
                        <Text style={styles.btnText}>确认</Text>
                    </TouchableOpacity>
                </View>

            </View>
        )
    }

    renderColorItem(item, index) {
        return (
            <TouchableOpacity
                key={index}
                style={item.selected ? styles.colorSelectItem : styles.colorItem}
                activeOpacity={0.8}
                onPress={() => {
                    this.changeColor(index)
                }}>
                {item.color != '' ?
                    <View style={[styles.colorBox, { backgroundColor: item.color, borderWidth: 1, borderColor: item.colorTitle == '白色' ? '#e4e4e4' : '#fff' }]}></View>
                    : null}

                <Text style={styles.colorText}>{item.colorTitle}</Text>
            </TouchableOpacity>
        )
    }

    renderRankItem(item, index) {
        return (
            <TouchableOpacity
                key={index}
                style={item.selected ? styles.rankItemSelect : styles.rankItem}
                activeOpacity={0.8}
                onPress={() => {
                    this.changeRank(index)
                }}>
                <Text style={[styles.colorText, { color: item.selected ? '#333333' : '#696969' }]}>{item.title}</Text>
            </TouchableOpacity>
        )
    }

    // 变速箱
    renderGearBoxItem(item, index) {
        return (
            <TouchableOpacity
                key={index}
                style={item.selected ? styles.rankItemSelect : styles.rankItem}
                activeOpacity={0.8}
                onPress={() => {
                    this.changeGearBox(index)
                }}>
                <Text style={[styles.colorText, { color: item.selected ? '#333333' : '#696969', fontSize: item.title == 'AMT机械变速' ? 10 : 12 }]}>{item.title}</Text>
            </TouchableOpacity>
        )
    }

    renderEmissionStdItem(item, index) {
        return (
            <TouchableOpacity
                key={index}
                style={item.selected ? styles.rankItemSelect : styles.rankItem}
                activeOpacity={0.8}
                onPress={() => {
                    this.changEemissionStd(index)
                }}>
                <Text style={[styles.colorText, { color: item.selected ? '#333333' : '#696969', fontSize: item.title == 'AMT机械变速' ? 10 : 12 }]}>{item.title}</Text>
            </TouchableOpacity>
        )
    }

    renderenergyTypeItem(item, index) {
        return (
            <TouchableOpacity
                key={index}
                style={item.selected ? styles.rankItemSelect : styles.rankItem}
                activeOpacity={0.8}
                onPress={() => {
                    this.changeEnergyType(index)
                }}>
                <Text style={[styles.colorText, { color: item.selected ? '#333333' : '#696969', fontSize: item.title == 'AMT机械变速' ? 10 : 12 }]}>{item.title}</Text>
            </TouchableOpacity>
        )
    }

    changeColor(index) {
        let newCarColorListData = []
        const selectedColor = this.state.outColors[index];

        // 如果选项为不限，清除其他选项
        if (selectedColor.colorTitle === '不限') {
            newCarColorListData = []
            this.state.outColors.forEach((item, idx) => {
                if (item.colorTitle === '不限') {
                    item.selected = true
                }else {
                    item.selected = false
                }
            })
        }else {
            this.state.outColors[index].selected = !this.state.outColors[index].selected
            this.state.outColors.forEach((item, idx) => {
                if (item.colorTitle === '不限') {
                    item.selected = false
                }else{
                    if(item.selected){
                        newCarColorListData.push(item.colorTitle)
                    }
                }
            })
        }
        console.log('newCarColorListData', newCarColorListData)
        this.setState({
            carColorListData: newCarColorListData,
        })
    }

    changeRank(index) {
        let newCarRankListData = []
        const selectedRank = this.state.carRankList[index];

        // 如果选项为不限，清除其他选项
        if (selectedRank.title === '不限') {
            newCarRankListData = []
            this.state.carRankList.forEach((item, idx) => {
                if (item.title === '不限') {
                    item.selected = true
                }else {
                    item.selected = false
                }
            })
        }else {
            this.state.carRankList[index].selected = !this.state.carRankList[index].selected
            this.state.carRankList.forEach((item, idx) => {
                if (item.title === '不限') {
                    item.selected = false
                }else{
                    if(item.selected){
                        newCarRankListData.push(item.id)
                    }
                }
            })
        }
        console.log('newCarRankListData', newCarRankListData)
        this.setState({
            carRankListData: newCarRankListData,
        })
    }

    // 变速箱
    changeGearBox(index){
        let newGearBoxListData = []
        const selectedGearBox = this.state.gearBoxList[index];

        // 如果选项为不限，清除其他选项
        if (selectedGearBox.title === '不限') {
            newGearBoxListData = []
            this.state.gearBoxList.forEach((item, idx) => {
                if (item.title === '不限') {
                    item.selected = true
                }else {
                    item.selected = false
                }
            })
        }else {
            this.state.gearBoxList[index].selected = !this.state.gearBoxList[index].selected
            this.state.gearBoxList.forEach((item, idx) => {
                if (item.title === '不限') {
                    item.selected = false
                }else{
                    if(item.selected){
                        newGearBoxListData.push(item.id)
                    }
                }
            })
        }
        console.log("newGearBoxListData", newGearBoxListData)
        this.setState({
            gearBoxListData: newGearBoxListData,
        })
    }

    // 排放标准
    changEemissionStd(index){
        let newEmissionStdListData = []
        const selectedEmissionStd = this.state.emissionStdList[index];

        // 如果选项为不限，清除其他选项
        if (selectedEmissionStd.title === '不限') {
            newEmissionStdListData = []
            this.state.emissionStdList.forEach((item, idx) => {
                if (item.title === '不限') {
                    item.selected = true
                }else {
                    item.selected = false
                }
            })
        }else {
            this.state.emissionStdList[index].selected = !this.state.emissionStdList[index].selected
            this.state.emissionStdList.forEach((item, idx) => {
                if (item.title === '不限') {
                    item.selected = false
                }else{
                    if(item.selected){
                        newEmissionStdListData.push(item.id)
                    }
                }
            })
        }
        console.log("newEmissionStdListData", newEmissionStdListData)
        this.setState({
            emissionStdListData: newEmissionStdListData,
        })
    }

    changeEnergyType(index){
        let newEnergyTypeListData = []
        const selectedEnergyTypeListData = this.state.energyTypeList[index];

        // 如果选项为不限，清除其他选项
        if (selectedEnergyTypeListData.title === '不限') {
            newEnergyTypeListData = []
            this.state.energyTypeList.forEach((item, idx) => {
                if (item.title === '不限') {
                    item.selected = true
                }else {
                    item.selected = false
                }
            })
        }else {
            this.state.energyTypeList[index].selected = !this.state.energyTypeList[index].selected
            this.state.energyTypeList.forEach((item, idx) => {
                if (item.title === '不限') {
                    item.selected = false
                }else{
                    if(item.selected){
                        newEnergyTypeListData.push(item.id)
                    }
                }
            })
        }
        console.log("newEnergyTypeListData", newEnergyTypeListData)
        this.setState({
            energyTypeListData: newEnergyTypeListData,
        })
    }

    changeMile(leftValue, rightValue) {
        let mileText = ''
        if (leftValue == 0 && rightValue == 10) {
            mileText = '不限'
        } else if (leftValue == 0) {
            mileText = rightValue + "万公里以下"

        } else if (leftValue >= 1 && rightValue == 10) {
            mileText = leftValue + "万公里以上"

        } else if (leftValue >= 1) {
            mileText = leftValue + "-" + rightValue + "万公里"

        }

        this.setState({
            mileShowText: mileText,
            mileageMin: leftValue,
            mileageMax: rightValue
        })
    }

    changeAge(leftValue, rightValue) {
        let mileText = ''
        if (leftValue == 0 && rightValue == 8) {
            mileText = '不限'
        } else if (leftValue == 0) {
            mileText = rightValue + "年以下"

        } else if (leftValue >= 1 && rightValue == 8) {
            mileText = leftValue + "年以上"

        } else if (leftValue >= 1) {
            mileText = leftValue + "-" + rightValue + "年"

        }

        this.setState({
            ageShowText: mileText,
            registerDateBegin: leftValue,
            registerDateEnd: rightValue
        })
    }

    changePrice(leftValue, rightValue) {
        let priceText = ''
        if (leftValue == 0 && rightValue == 60) {
            priceText = '不限'
        } else if (leftValue == 0) {
            priceText = rightValue + "万以下"
        } else if (leftValue >= 1 && rightValue == 60) {
            priceText = leftValue + "万以上"
        } else if (leftValue >= 1) {
            priceText = leftValue + "-" + rightValue + "万"
        }

        this.setState({
            priceText: priceText,
            listPriceMin: leftValue,
            listPriceMax: rightValue
        })
    }

    confirmFilter() {
        DeviceEventEmitter.emit('commonEvent', {
            type: 'moreFilter',
            fromPage: this.props.route.params.fromPage,
            isReported: this.state.isHasWeibao ? 1 : 0,
            mileageMin: this.state.mileageMin,
            mileageMax: this.state.mileageMax,
            mileShowText: this.state.mileShowText,
            registerDateBegin: this.state.registerDateBegin,
            registerDateEnd: this.state.registerDateEnd,
            priceText: this.state.priceText,
            listPriceMin: this.state.listPriceMin,
            listPriceMax: this.state.listPriceMax,
            ageShowText: this.state.ageShowText,
            carColorList: this.state.carColorListData,
            carColorListPr: this.state.outColors,
            carRankList: this.state.carRankListData,
            carRankListPr: this.state.carRankList,
            gearboxTypeList: this.state.gearBoxListData,
            gearboxTypeListPr: this.state.gearBoxList,
            emissionStdList: this.state.emissionStdListData,
            emissionStdListPr: this.state.emissionStdList,
            energyTypeList: this.state.energyTypeListData,
            energyTypeListPr: this.state.energyTypeList,
        });
        navigation.goBack()
    }

    resetFilter() {
        this.changeColor(0)
        this.changeRank(0)
        this.changeGearBox(0)
        this.changEemissionStd(0)
        this.changeEnergyType(0)
        this.setState({
            isHasWeibao: false,
        })
        if (this.refs._rangeSlider) {
            this.refs._rangeSlider.setLowValue(0);
            this.refs._rangeSlider.setHighValue(10);
        }
        if (this.refs._rangeSliderAge) {
            this.refs._rangeSliderAge.setLowValue(0);
            this.refs._rangeSliderAge.setHighValue(8);
        }
        if (this.rangeSliderPrice.current) {
            this.rangeSliderPrice.current.setLowValue(0);
            this.rangeSliderPrice.current.setHighValue(60);
        }
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f9f9f9',

    },

    bottomTabContainer: {
        width: '100%',

        flexDirection: 'row',
        alignItems: 'flex-start',

        backgroundColor: '#fff'
    },
    resetBtn: {
        flex: 1,
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f6f6f6'
    },
    confirmBtn: {
        flex: 2,
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffde00'
    },
    btnText: {
        fontSize: 16,
        color: '#333333',
        fontWeight: 'bold',
    },
    itemContain: {
        height: 50,
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor: '#fff'
    },
    titleText: {
        fontSize: 14,
        color: '#333333',
        fontWeight: 'bold',
    },
    mileContain: {
        paddingHorizontal: 15,
        backgroundColor: '#fff',
        marginTop: 1
    },
    mileTitleContain: {
        height: 50,
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    mileValueText: {
        fontSize: 14,
        color: '#ff9c00'
    },
    rangeTipContain: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 5,
        marginBottom: 10
    },

    colorItem: {
        height: 36,
        width: '25%',
        paddingLeft: 15,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    colorBox: {
        height: 14,
        width: 14,
        marginRight: 5
    },
    colorSelectItem: {
        height: 36,
        width: '25%',
        paddingLeft: 15,
        alignItems: 'center',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        backgroundColor: '#fffadb',
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#ffde00',

    },
    colorText: {
        fontSize: 12,
        color: '#333333'
    },

    rankItem: {
        height: 32,
        width: '21%',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ffffff',
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#d1d1d1',
        marginRight: 15,
        marginBottom: 15
    },
    rankItemSelect: {
        height: 32,
        width: '21%',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        backgroundColor: '#fffadb',
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#ffde00',
        marginRight: 15,
        marginBottom: 15
    }
})